<template>
  <!-- 用户密码修改组件 -->
  <div class="lum-dialog-mask" v-show="isShow">
    <el-container class="lum-dialog-box" v-outside="close">
      <el-header class="header" height="50px">
        <p>修改密码</p>
        <p class="tools">
          <i class="el-icon-close" @click="close"></i>
        </p>
      </el-header>
      <el-main class="main">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item prop="old_password" label="旧密码">
            <el-input
              v-model="form.old_password"
              type="password"
              placeholder="请填写旧密码"
              class="cuborder-radius no-border"
              @keyup.enter.native="onSubmit('form')"
              size="medium"
            />
          </el-form-item>
          <el-form-item prop="new_password" label="新密码">
            <el-input
              v-model="form.new_password"
              type="password"
              placeholder="请填写新的密码"
              class="cuborder-radius no-border"
              @keyup.enter.native="onSubmit('form')"
              size="medium"
            />
          </el-form-item>
          <el-form-item prop="new_password2" label="重复密码">
            <el-input
              v-model="form.new_password2"
              type="password"
              placeholder="请再次填写新密码"
              class="cuborder-radius no-border"
              @keyup.enter.native="onSubmit('form')"
              size="medium"
            />
          </el-form-item>
          <el-form-item style="margin-top: 40px">
            <el-button
              type="primary"
              @click="onSubmit('form')"
              class="submit-btn"
              :loading="loading"
              size="medium"
            >
              立即修改
            </el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { ServeUpdatePassword } from "@/api/user";

export default {
  name: "UserEditPassword",
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.new_password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      loading: false,
      form: {
        old_password: "",
        new_password: "",
        new_password2: "",
      },
      rules: {
        old_password: [
          {
            required: true,
            message: "旧密码不能为空!",
            trigger: "blur",
          },
        ],
        new_password: [
          {
            required: true,
            message: "新密码不能为空!",
            trigger: "blur",
          },
        ],
        new_password2: [
          {
            required: true,
            validator: validatePass2,
            trigger: "blur",
          },
        ],
      },

      isShow: false,
    };
  },
  methods: {
    // 显示窗口
    open() {
      this.$refs["form"].resetFields();
      this.isShow = true;
    },

    // 关闭窗口
    close() {
      this.isShow = false;
    },

    // 表单验证
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) return false;
        this.changePassword();
      });
    },

    // 提交修改手机号
    changePassword() {
      this.loading = true;
      ServeUpdatePassword({
        old_password: this.form.old_password,
        new_password: this.form.new_password,
      })
        .then((res) => {
          if (res.code == 200) {
            this.$refs["form"].resetFields();
            this.$notify({
              title: "成功",
              message: "密码修改成功...",
              type: "success",
            });
          } else {
            this.$message(res.message);
          }

          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="less" scoped>
.lum-dialog-box {
  width: 450px;
  max-width: 450px;
}
</style>
